<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/ajax-day02/js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/vue-router-3.4.9.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="/ajax-day02/js/axios-0.21.0.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/book/show"><button>查询</button></router-link>
        <router-link to="/book/add"><button>添加</button></router-link>
        <hr>
        <router-view></router-view>
    </div>
    <template id="book-table">
        <div>
            <table>
                <thead>
                <tr>
                    <th>编号</th>
                    <th>图书</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="b in books" :key="b.bookId">
                    <td>{{b.bookId}}</td>
                    <td>{{b.bookName}}</td>
                    <td>{{b.author}}</td>
                    <td>{{b.price}}</td>
                    <td>{{b.stock}}</td>
                    <td>
                        <button @click="removeBook(b.bookId)">删除</button>
                        <router-link :to="{path:'/book/update',query:{bookId:b.bookId}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <p>
                <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)"><button style="margin:0 6px">{{page}}</button></a>
            </p>
        </div>
    </template>
    <template id="add-form" >
        <form action="" @submit.prevent="addBook">
            图书名: <input type="text" v-model="b.bookName" > <br>
            作者: <input type="text" v-model="b.author" > <br>
            价格: <input type="number" v-model="b.price" > <br>
            库存: <input type="number" v-model="b.stock" > <br>
            <input type="submit" value="添加">
        </form>
    </template>
    <template id="update-form">
        <form action="" @submit.prevent="updateBook">
            <input type="hidden" v-model="b.bookId">
            图书名: <input type="text" v-model="b.bookName" > <br>
            作者: <input type="text" v-model="b.author" > <br>
            价格: <input type="number" v-model="b.price" > <br>
            库存: <input type="number" v-model="b.stock" > <br>
            <input type="submit" value="更新">
        </form>
    </template>
    <script>
        const updateForm = {
            template: "#update-form",
            data(){
                return {
                    b:{}
                }
            },
            methods:{
                updateBook(){
                    //发起更新的ajax请求
                    /*let url = "/ajax-day02/book/update";
                    let data = Qs.stringify({b:this.b},{allowDots: true});
                    let type = "post";
                    myAjax(url,data,type,result=>{
                        let responseData = JSON.parse(result);
                        if (responseData.status == "success") {
                            alert("更新成功");
                            this.$router.push("/book/show");
                        }else{
                            alert("更新失败");
                        }
                    })*/
                    axios.post("/ajax-day02/book/update",Qs.stringify({b:this.b},{allowDots: true}))
                        .then(resp=>{
                            let responseData = resp.data;
                            if (responseData.status == "success") {
                                alert("更新成功");
                                this.$router.push("/book/show");
                            }else{
                                alert("更新失败");
                            }
                        }).catch(error=>console.log(error));
                }
            },
            created(){
                /*let url = "/ajax-day02/book/showOne";
                let data = "bookId="+this.$route.query.bookId;
                let type = "get";
                myAjax(url,data,type,result=>{
                    let responseData = JSON.parse(result);
                    this.b = responseData;
                })*/
                axios.get("/ajax-day02/book/showOne?bookId="+this.$route.query.bookId)
                    .then(resp=>{
                        this.b = resp.data;
                    }).catch(error=>console.log(error))
            }
        }
        const addForm = {
            template: "#add-form",
            data(){
                return {
                    b:{}
                }
            },
            methods:{
                addBook(){
                    //发起ajax异步添加请求
                    // let url = "/ajax-day02/book/add";

                    // let data = "b.bookName="+this.b.bookName+"&b.author="+this.b.author+"&b.price="+this.b.price+"&b.stock="+this.b.stock;
                    /*let data = Qs.stringify({b:this.b},{allowDots:true}); // b.bookName=&b.author=&b.price=
                    let type = "post";
                    myAjax(url,data,type,result=>{
                        let responseData = JSON.parse(result);
                        if (responseData.status == "success") {
                            alert("添加成功");
                            this.$router.push("/book/show");
                        }else{
                            alert("添加失败");
                        }
                    })*/

                    axios.post("/ajax-day02/book/add",Qs.stringify({b:this.b},{allowDots:true}))
                        .then(resp=>{
                            let responseData = resp.data;
                            if (responseData.status == "success") {
                                alert("添加成功");
                                this.$router.push("/book/show");
                            }else{
                                alert("添加失败");
                            }
                        }).catch(error=>console.log(error));

                }
            }
        }

        const bookTable = {
            template: "#book-table",
            data(){
                return {
                    books:[],
                    pages:[],
                    currentPage:1
                }
            },
            methods:{
                handleAClick(i){
                    /*
                    this.currentPage = i;
                    let url = "/ajax-day02/book/show";
                    let data = `pageNum=${i}&pageSize=5`;
                    let type = "get";
                    myAjax(url,data,type,result=>{
                        //result字符串 {"books":[...],"pages":[1,2,3,...]}
                        let responseData = JSON.parse(result);
                        console.log(responseData);
                        this.books = responseData.books;
                        this.pages = responseData.pages;

                    })*/
                    axios.get("/ajax-day02/book/show",{
                        params:{
                            pageNum:i,
                            pageSize:5
                        }
                    }).then(resp=>{
                        let responseData = resp.data;
                        console.log(responseData);
                        this.books = responseData.books;
                        this.pages = responseData.pages;
                    }).catch(error=>console.log(error));

                },
                removeBook: function (id) {
                    let isDelete = confirm("确定删除吗?");
                    if(!isDelete){
                        return;
                    }

                    //发起ajax异步的删除请求
                    /*
                    let url = "/ajax-day02/book/remove";
                    let data = "bookId=" + id;
                    let type = "get";
                    myAjax(url, data, type, result => {
                        let responseData = JSON.parse(result);
                        if (responseData.status == "success") {
                            alert("删除成功");
                            this.handleAClick(this.currentPage);
                        } else {
                            alert("删除失败");
                        }
                    })

                     */

                    axios.get("/ajax-day02/book/remove?bookId="+id)
                        .then(resp=>{
                            let responseData = resp.data;
                            if (responseData.status == "success") {
                                alert("删除成功");
                                this.handleAClick(this.currentPage);
                            } else {
                                alert("删除失败");
                            }
                        }).catch(error=>console.log(error));

                }
            },
            created(){
                //发起ajax异步请求
                this.handleAClick(1);
            }
        }

        const router = new VueRouter({
            routes:[
                {path:"/book/show",component:bookTable},
                {path:"/book/add",component: addForm},
                {path:"/book/update",component: updateForm}
            ]
        })

        const vm = new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>